/*
	轮播图
	  图片元素 
		swiper_items_li transition: all .5s;
	  小按钮 
		btn_item transition: all .3s;
	  按钮prev next 
		swiper_btn_prev
		swiper_btn_next
*/
(function() {
	var litem = document.getElementsByClassName("swiper_items_li");
	var btn_item = document.getElementsByClassName("btn_item");
	// 定时器
	var timer = "",
		promptly = "",
		now_page = 0,
		swiper_btn_flag = 0;
	litem[0].style.opacity = 1;
	btn_item[0].style.backgroundColor = "rgb(105, 107, 109)";


	var settimer = function() {
		timer = setInterval(function() {
			now_page++;
			if (now_page >= litem.length) {
				now_page = 0;
			}
			swiper_btn_flag = now_page;
			for (let i = 0; i < litem.length; i++) {
				if (litem[i].style.opacity == 1) {
					litem[i].style.opacity = 0;
				}
				btn_item[i].style.backgroundColor = "rgb(14, 19, 25)";
			}
			litem[now_page].style.opacity = 1;
			btn_item[now_page].style.backgroundColor = "rgb(105, 107, 109)";
		}, 2000)
	}
	settimer(); //初始化
	var swiper_item_ul = document.getElementsByClassName("swiper_item_ul")[0]; //图片盒子 进入清空定时器   离开开启定时器
	var swiper_btn_next = document.getElementsByClassName("swiper_btn_next")[0]; //下一个按钮  进入清空定时器
	var swiper_btn_prev = document.getElementsByClassName("swiper_btn_prev")[0]; //上一个按钮  进入清空定时器
	var swiper_btn = document.getElementsByClassName("swiper_btn")[0]; //小按钮 盒子  进入清空定时器
	/*
		小按钮 进入的时候要 变背景色 
		原色：btn_item[i].style.backgroundColor = "rgb(14, 19, 25)";
		变色：btn_item[i].style.backgroundColor = "rgb(105, 107, 109)";
	*/
	/* 
	 鼠标移入  swiper_item_ul /btn_item swiper_btn_prev  swiper_btn_next
	 的作用域 清空计时器
	 */


	for (let i = 0; i < btn_item.length; i++) {
		btn_item[i].index = i;

		swiper_btn.onmouseenter = function() {
			clearInterval(timer);
		}
		btn_item[i].onmouseenter = function() {
			clearInterval(timer);
			for (let i = 0; i < litem.length; i++) {
				btn_item[i].style.backgroundColor = "rgb(14, 19, 25)";
			}
			if (swiper_btn_flag > -1) {
				btn_item[swiper_btn_flag].style.backgroundColor = "rgb(105, 107, 109)";
			}
			btn_item[i].style.backgroundColor = "rgb(105, 107, 109)";
		}
		btn_item[i].onmouseleave = function() {
			clearInterval(timer);
			for (let i = 0; i < litem.length; i++) {
				btn_item[i].style.backgroundColor = "rgb(14, 19, 25)";
			}
			if (swiper_btn_flag > -1) {
				btn_item[swiper_btn_flag].style.backgroundColor = "rgb(105, 107, 109)";
			}
		}
		btn_item[i].onclick = function() {
			now_page = this.index;
			for (let i = 0; i < litem.length; i++) {
				if (litem[i].style.opacity == 1) {
					litem[i].style.opacity = 0;
				}
				btn_item[i].style.backgroundColor = "rgb(14, 19, 25)";
			}
			litem[now_page].style.opacity = 1;
			btn_item[now_page].style.backgroundColor = "rgb(105, 107, 109)";
			swiper_btn_flag = now_page;
		}
	}
	swiper_btn_prev.onmouseenter =
		swiper_btn_next.onmouseenter =
		swiper_item_ul.onmouseenter = function() {
			clearInterval(timer);
			// console.log('关闭');
		}
	/*开启定时器*/
	swiper_btn_prev.onmouseleave =
		swiper_btn_next.onmouseleave =
		swiper_item_ul.onmouseleave = function() {
			settimer();
			// console.log("开启");
		}
	swiper_btn_prev.onclick = function() {
		clearInterval(timer); //清空计时器
		now_page--; //向上
		//临界
		if (now_page < 0) {
			now_page = litem.length - 1;
		}
		swiper_btn_flag = now_page;
		for (let i = 0; i < litem.length; i++) {
			if (litem[i].style.opacity == 1) {
				litem[i].style.opacity = 0;
			}
			if (btn_item[i].style.backgroundColor == "rgb(105, 107, 109)") {
				btn_item[i].style.backgroundColor = "rgb(14, 19, 25)";
			}
		}
		litem[now_page].style.opacity = 1;
		btn_item[now_page].style.backgroundColor = "rgb(105, 107, 109)";
		// console.log("点击prev");
	}
	swiper_btn_next.onclick = function() {
		clearInterval(timer); //清空计时器
		now_page++; //向下
		//临界
		if (now_page >= litem.length) {
			now_page = 0;
		}
		swiper_btn_flag = now_page;
		for (let i = 0; i < litem.length; i++) {
			if (litem[i].style.opacity == 1) {
				litem[i].style.opacity = 0;
			}
			if (btn_item[i].style.backgroundColor == "rgb(105, 107, 109)") {
				btn_item[i].style.backgroundColor = "rgb(14, 19, 25)";
			}
		}
		litem[now_page].style.opacity = 1;
		btn_item[now_page].style.backgroundColor = "rgb(105, 107, 109)";
		// console.log("点击next");
	}
})()
